<template>
  <div class="invite">
    <div class="invite_back">
      <div class="back_msg">
        <div class="go_back" @click="back" v-if="!isShare"></div>
        <div class="back_img"></div>
        <div class="back_name">寻匠之美</div>
      </div>
    </div>
    <div class="invite_code">
      <div class="code_exp">邀请好友一起赚钱吧，多邀多得！</div>
      <div class="code_state">邀请好友扫描二维码，ta可直接获得邀请码</div>
      <div class="code_img">
        <img :src="qrcode" />
      </div>
      <div class="code_glance">长按保存图片，扫一扫寻匠之美二维码</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      qrcode: ""
    };
  },
  computed: {
    isShare: function() {
      return location.href.indexOf("isShare=") !== -1;
    }
  },
  created() {
    document.title = "邀请好友";
    this.getShare();
    var id = this.$route.query.id;
    this.$axios
      .get("/v1/common/index/getInviteQrcode", {
        params: {
          user_id: id
        }
      })
      .then(
        res => {
          var data = res.data;
          if (data.code == 200) {
            this.qrcode = data.data.qrcode;
          } else {
            Toast(data.msg);
          }
        },
        res => {
          console.log("error");
        }
      );
  },
  methods: {
    getShare() {
      var that = this;
      var params = new URLSearchParams();
      params.append("type", 2); //你要传给后台的参数值 key/value
      params.append("user_id", this.$route.query.id);
      this.$axios({
        url: "/v1/common/share",
        method: "post",
        data: params
      }).then(function(res) {
        let data = JSON.stringify(res.data.data);
        if (!that.$route.query.isShare) {
          var url = window.location.href + "&isShare=true";
        } else {
          var url = window.location.href;
        }
        that.wxShare.wxShowMenu(url, data);
      });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.invite_back {
  width: 100%;
  height: 838px;
  padding-top: 34px;
  background: url(/static/images/reg.png) no-repeat center center;
  background-size: 100% 100%;
}
.go_back {
  width: 48px;
  height: 48px;
  background: url("/static/images/team_go_back.png") no-repeat center center;
  background-size: 100% 100%;
  margin-top: 12px;
}
.invite_back .back_msg {
  width: 280px;
  height: 72px;
  margin-left: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.back_msg .back_img {
  width: 72px;
  height: 72px;
  background: url("/static/images/xjzm.png") no-repeat center center;
  background-size: 100% 100%;
  border-radius: 8px;
}
.back_msg .back_img img {
  width: 100%;
}
.back_msg .back_name {
  font-size: 32px;
  color: #333334;
  line-height: 72px;
  font-weight: bold;
}
.invite_code {
  width: 100%;
  height: 906px;
  background: #fee6e6;
}
.invite_code .code_exp {
  text-align: center;
  color: #333334;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
  padding-top: 16px;
}
.invite_code .code_img {
  width: 520px;
  height: 520px;
  background: #fff;
  margin: 0 auto;
  margin-top: 38px;
}
.code_img img {
  width: 100%;
  height: 100%;
}
.invite_code .code_state {
  text-align: center;
  color: #9b9b9b;
  font-size: 32px;
  line-height: 96px;
}
.invite_code .code_glance {
  text-align: center;
  margin-top: 48px;
  font-size: 28px;
  color: #9b9b9b;
}
</style>
